<template>
  <div class="navbar">
    <!-- 头像等个人信息 -->
    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img v-if="avatar" :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar" />
          <svg v-else class="iconSymbol" aria-hidden="true">
            <use xlink:href="#icontouxiang"></use>
          </svg>
          <span>{{ name }}</span>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item v-show="form === 2" @click.native="handlePsd" align="center">
            <span style="display:block;">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item align="center">{{ roleName }}</el-dropdown-item>
          <el-dropdown-item align="center" @click.native="getGitInfo">Git账号</el-dropdown-item>
          <el-dropdown-item divided align="center" @click.native="logout">
            <span style="display:block;">退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <!-- git设置弹窗 -->
    <el-dialog
      width="480px"
      title="Git账号"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      custom-class="git-form-dialog"
      :before-close="handleClose"
    >
      <el-form :model="gitForm" :rules="rules" ref="form">
        <el-form-item label="地址：" label-width="80px">
          <a :href="gitServer" target="_blank" rel="noopener noreferrer">{{ gitServer }}</a>
        </el-form-item>
        <el-form-item label="账号：" prop="gitLabUser" label-width="80px">
          <el-input v-model="gitForm.gitLabUser" size="small" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="gitLabPwd" label-width="80px">
          <el-input v-model="gitForm.gitLabPwd" size="small" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getGitAccount, setGitAccount } from '@/utils/apiPath'
import { mapGetters } from 'vuex'
import { removeToken } from '@/utils/auth'
import { getData, postData } from '@/api/requestData';
export default {
  data() {
    return {
      dialogFormVisible: false,
      gitForm: {
        gitLabUser: '',
        gitLabPwd: ''
      },
      gitServer: '',
      rules: {
        gitLabUser: [{ required: true, message: 'git账号不能为空', trigger: 'blur' }],
        gitLabPwd: [{ required: true, message: 'git密码不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'name', 'form', 'roleName']),
  },
  methods: {
    getGitInfo() {
      getGitAccount().then(res => {
        this.gitServer = res.data.GitServer
        this.gitForm.gitLabUser = res.data.GitLabUser
        this.gitForm.gitLabPwd = res.data.GitLabPwd
        this.dialogFormVisible = true
      }).catch(() => {
        this.$message.error('git信息获取失败')
      })
    },
    save: _.throttle(function() {
      this.$refs.form.validate(valid => {
        if (valid) {
          setGitAccount(this.gitForm).then(res => {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
          })
        }
      })
    }, 300),
    handleClose() {
      this.$refs.form.resetFields()
      this.dialogFormVisible = false
      // this.$nextTick(() => {
      //   this.dialogFormVisible = false
      // })
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar');
    },
    async logout() {
      removeToken();
      this.$store.dispatch('userState/state', {
        keyName: 'resetState',
        value: '',
      });
      this.$router.push({ path: '/login' });
      this.$router.go(0);
    },
    // 修改密码
    handlePsd() {
      this.$prompt('请输入新密码', '修改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
          postData('user/update/self/pwd', { password: value }).then((res) => {
            this.$message.success('修改密码成功');
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消',
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '../../styles/main.css';
.navbar {
  position: relative;
  height: 100%;
  .right-menu {
    height: 100%;
    line-height: 60px;
    color: #bfcbd9;
    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      display: flex;
      align-items: center;
      .avatar-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        color: #FFF;
        .user-avatar {
          cursor: pointer;
          width: 32px;
          height: 32px;
          border-radius: 16px;
        }
        span {
          margin: 0 12px;
        }
      }
    }
    .remind-wapper {
      float: right;
      font-size: 20px;
      padding: 0 20px;
    }
  }
}
>>>.git-form-dialog {
  .el-dialog__body {
    padding: 20px;
  }
  .el-form-item {
    a {
      color: #409EFF;
    }
  }
  .el-input {
    .el-input__inner {
      border-radius: 2px;
      padding: 0 8px;
    }
  }
}
</style>
<style type="text/css">
  .iconSymbol {
    width: 32px;
    height: 32px;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
